<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
	  <el-form-item label="名称" prop="discoName">
	    <el-input
	      v-model="queryParams.discoName"
	      placeholder="请输入名称"
	      clearable
	    />
	  </el-form-item>
	  <!-- <el-form-item label="时间">
	    <el-date-picker
	      v-model="courseTime"
	      value-format="yyyy-MM-dd HH:mm:ss"
	      type="daterange"
	      range-separator="-"
	      start-placeholder="开始日期"
	      end-placeholder="结束日期"
	    ></el-date-picker>
	  </el-form-item> -->
	  <el-form-item label="状态" prop="status">
	    <el-select v-model="queryParams.status"
	     class="width100"
	     placeholder="状态" clearable>
	      <el-option
	       v-for="item in courseStatus"
	       :key="item.type"
	       :label="item.name"
	       :value="item.type"
	      />
	    </el-select>
	  </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:post:add']"
        >新增</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="postList"> 
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column label="序号" align="center" prop="id" />
      <el-table-column label="歌舞厅名称" align="center" prop="discoName" />
      <el-table-column label="物联设备ID" align="center" prop="deviceId" />
      <el-table-column label="状态" align="center" prop="statusCn" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:post:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:post:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改岗位对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="900px">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
		<h3>基础信息</h3>
		<el-form-item label="歌舞厅名称" prop="discoName">
		  <el-input v-model="form.discoName" placeholder="请输入歌舞厅名称" />
		</el-form-item>
		<el-form-item label="状态" prop="status">
		  <el-select v-model="form.status"
		   class="width100"
		   placeholder="状态" clearable>
		    <el-option
		      v-for="item in courseStatus"
		      :key="item.type+''"
		      :label="item.name"
		      :value="item.type+''"
		    />
		  </el-select>
		</el-form-item>
		<el-form-item label="物联设备ID" prop="deviceId">
		  <el-input v-model="form.deviceId" placeholder="请输入物联设备ID" />
		</el-form-item>
		<el-form-item label="图片" prop="images">
			<FileUpload
				@input='inputFile'
				:value="fileList"
				:fileType="['png', 'jpg', 'jpeg']"
			>
			</FileUpload>
		</el-form-item>
		<el-form-item label="介绍" prop="remark">
			<el-input v-model="form.remark" placeholder="介绍" type="textarea" />
		</el-form-item>
		<h3>预约设置</h3>
		<el-form-item label="可预约天数" prop="appDays">
		  <el-input v-model="form.appDays" placeholder="请输入可预约天数" type="number" />
		</el-form-item>
		<h3>预约时段设置</h3>
		<el-button type="primary" @click="addTime">添加时段</el-button>
		<el-divider></el-divider>
		<el-table :data="timeList">
		  <el-table-column label="预约时段" align="center" width="260">
		  			<template slot-scope="scope">
		  			  <span>{{ parseTime(scope.row.beginTime, '{y}-{m}-{d} {h}:{i}') }} - {{ parseTime(scope.row.endTime, '{y}-{m}-{d} {h}:{i}') }}</span>
		  			</template>
		  </el-table-column>
		  <el-table-column label="操作" align="center">
		    <template slot-scope="scope">
		      <el-button
		        size="mini"
		        type="text"
		        icon="el-icon-edit"
		        @click="handleTimeUpdate(scope.row,parseInt(scope.$index+1))"
		      >修改</el-button>
		      <el-button
		        size="mini"
		        type="text"
		        icon="el-icon-delete"
		        @click="handleTimeDelete(scope.row,parseInt(scope.$index+1))"
		      >删除</el-button>
		    </template>
		  </el-table-column>
		</el-table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
	<el-dialog
		width="500px"
		:title="timeListTitle"
		:visible.sync="innerVisibleYTime"
		append-to-body>
		  <div>
			  <el-form ref="timeform" :model="formTime" :rules="rulesTime" label-width="120px">
				<el-form-item label="每日可预约时段" required>
					  <el-date-picker
					    class="width100"
						v-model="timePicker"
						type="datetimerange"
						format="yyyy-MM-dd HH:mm:ss"
						value-format="yyyy-MM-dd HH:mm:ss"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期">
					  </el-date-picker>
				</el-form-item>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitFormTime">确 定</el-button>
				<el-button @click="cancelTime">取 消</el-button>
			  </div>
		  </div>
	</el-dialog>
  </div>
</template>

<script>
import { 
	insertDiscoManage,
	editDiscoManage,
	detailDiscoManage,
	delDiscoManage,
	listDiscoManage,
	listDiscoRoom,
	delDiscoRoom,
	insertDiscoRoom,
	editDiscoRoom
} from "@/api/song/index";
export default {
  name: "Post",
  dicts: ['sys_normal_disable'],
  data() {
    return {
	  //时段设置标题
	  timeListTitle:'添加时段',
	  //所选时段
	  timePicker:[],
	  //时段索引
	  timeIndex:null,
	  //时段弹窗
	  innerVisibleYTime:false,
	  //上传图片
	  fileList:[],
	  //时间
	  courseTime:[],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
	  //预约时段
	  timeList:[],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 岗位表格数据
      postList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        status: undefined,
        discoName: undefined,
      },
	  //所属小区
	  communityArr:[],
      // 表单参数
      form: {},
	  formTime: {},
	  ktvId:null,
	  rulesTime: {
		  beginTime: [
		    { required: true, message: "预约开始时间不能为空", trigger: "blur" }
		  ],
		  endTime: [
		    { required: true, message: "预约结束时间不能为空", trigger: "blur" }
		  ],
		  price: [
		    { required: true, message: "预约价格不能为空", trigger: "blur" }
		  ],
	  },
      // 表单校验
      rules: {
        appDays: [
          { required: true, message: "可预约天数不能为空", trigger: "blur" }
        ],
		discoName: [
		  { required: true, message: "歌舞厅名称不能为空", trigger: "blur" }
		],
        deviceId: [
          { required: true, message: "设备ID不能为空", trigger: "blur" }
        ],
        remark: [
          { required: true, message: "介绍不能为空", trigger: "blur" }
        ],
        status: [
          { required: true, message: "状态不能为空", trigger: "change" }
        ]
      }
    };
  },
  created() {
    this.getList();
  },
  computed:{
	  courseStatus: {
	    get() {
	      return this.$store.state.common.courseStatus
	    },
	  },
  },
  methods: {
	/** 添加时段 **/
	addTime(){
		this.formTime = {}
		this.timeListTitle = "增加时段";
		this.innerVisibleYTime = true
		this.timeIndex = null
	},
    /** 查询列表 */
    getList() {
      this.loading = true;
      listDiscoManage(this.queryParams).then(response => {
        this.postList = response.rows.map(i=>{
			i.status = i.status+'';
			i.statusCn = this.courseStatus.filter(v=>v.type == i.status)[0].name
			return i
		})
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
	// 时段取消按钮
	cancelTime() {
	  this.innerVisibleYTime = false;
	  this.formTime = {}
	},
    // 表单重置
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10
      };
	  this.fileList = []
	  this.form = {}
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
	  /* this.queryParams.beginDate = this.courseTime[0]
	  this.queryParams.endDate = this.courseTime[1] */
      this.getList();
    }, 
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
	  this.courseTime = []
      this.handleQuery();
    },
	//获取上传图片
	inputFile(file){
		this.form.images = file
	},
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.postId)
      this.single = selection.length!=1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
	  this.ktvId = null
      this.title = "添加歌舞厅"; 
	  this.timeList = []
    },
	/** 时段修改 **/
	handleTimeUpdate(row,index) {
	  this.formTime = row;
	  this.innerVisibleYTime = true;
	  this.timePicker = [row.beginTime,row.endTime]
	  this.timeIndex = index
	  this.timeListTitle = "修改时段";
	},
    /** 修改按钮操作 */
    handleUpdate(row) {
      const postId = row.id
      this.form = row;
      this.open = true;
	  this.fileList = row.images
      this.title = "修改KTV";
	  this.ktvId = postId
	  this.getListKtvRoom(postId)
    },
	getListKtvRoom(res){
		let id = {
			discoId:res
		}
		listDiscoRoom(id).then(response => {
		   this.timeList = response.rows
		});
	},
	/** 预约时段 提交按钮 **/
	submitFormTime: function() {
	    this.formTime.beginTime = this.timePicker[0]
	    this.formTime.endTime = this.timePicker[1]
	    let timeList = JSON.parse(JSON.stringify(this.timeList))
	    this.$refs["timeform"].validate(valid => {
	      if (valid) {
	        if (this.timeIndex) {
	  		if(this.formTime.id){
	  			editDiscoRoom(this.formTime).then(response => {
	  			  timeList[this.timeIndex] = this.formTime
	  			});
	  		}else{
	  			timeList[this.timeIndex] = this.formTime
	  		}
	  		this.$modal.msgSuccess("修改成功");
	        } else {
	  		if(this.ktvId){
	  			this.formTime.ktvId = this.ktvId
	  			insertDiscoRoom(this.formTime)
	  		}
	  		timeList = timeList.concat(this.formTime)
	  		this.$modal.msgSuccess("添加成功");
	        }
	      }
	  	this.timeList = timeList
	  	this.innerVisibleYTime = false;
	    });
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs["form"].validate(valid => {
		  /** 时段获取 start**/
		  let timeListIndex = this.timeList.length
		  if(timeListIndex == 0){
		  		  this.$modal.msgError("请设置预约时段！");
		  		  return false
		  }
		  let timeList = []
		  this.timeList.map(i=>{
		  		  timeList.push({
		  			  beginTime:i.beginTime,
		  			  endTime:i.endTime,
		  			  price:i.price
		  		  })
		  })
		  /** 时段获取 end**/
        if (valid) {
          if (this.form.id != undefined) {
            editDiscoManage(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
			this.form.discoAppConfigs = timeList
            insertDiscoManage(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const postIds = {
		  id:row.id
	  };
      this.$modal.confirm('是否确认删除该歌舞厅？').then(function() {
        return delDiscoManage(postIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
	//时段删除
	handleTimeDelete(row,index){
		const postIds = {
			id:row.id
		};
		let timeList = this.timeList
		if(row.id){
			this.$modal.confirm('是否确认删除该时段？').then(function() {
			  return delDiscoRoom(postIds);
			}).then(() => {
			  this.$modal.msgSuccess("删除成功");
			  timeList.splice(parseInt(index-1),1)
			  this.timeList = timeList
			}).catch(() => {});
		}else{
			timeList.splice(parseInt(index-1),1)
			this.timeList = timeList
		}
	}
  }
};
</script>